<template>
  <div style="height: calc(100vh - 115px);padding: 15px;">
    <div class="j-tree">
      <div style="text-align: right;margin-bottom: 10px;">
        <lbtn type="primary" circle icon="Plus" size="small" @click="addPid" />
      </div>
      <el-scrollbar :height="hei">
        <el-tree
          ref="JTreeRef"
          :data="data"
          node-key="id"
          :props="treeProps"
          :expand-on-click-node="false"
          :allow-drag="allowDrag"
          :allow-drop="allowDrop"
          draggable
          @node-drop="nodeDrop"
        >
          <template #default="{ node, data }">
            <span class="custom-tree-node" >
              <span class="code" v-if="showCode">{{ data.code }}</span>
              <span class="label">{{ node.label }}</span>
              <span>
                <el-space>
                  <lbtn
                    type="text"
                    size="small"
                    icon="Plus"
                    @click="() => append(data, node)"
                  />
                <lbtn
                  type="text"
                  size="small"
                  icon="Edit"
                  @click="() => edit(data, node)"
                  style="margin-right: 10px;"
                />
                <el-popconfirm title="确定删除" @confirm="() => remove( data, node)">
                  <template #reference>
                    <lbtn
                      type="text"
                      size="small"
                      icon="del"
                    />
                  </template>
                </el-popconfirm>
                </el-space>
              </span>
            </span>
          </template>
        </el-tree>
      </el-scrollbar>
    </div>
  </div>

</template>

<script>
import tool from "@/utils/tool";
export default {
  props: {
    labelKey: {type: String, default: 'name'},
    saveUrl: {type: String, default: ''},
    listUrl: {type: String, default: ''},
    delUrl: {type: String, default: ''},
    mod: {type: String, default: ''},
    showCode: {type: Boolean, default: false},
    rule: {type: Array, default: () => { return [] }},
  },
  data() {
    return {
      data: [],
      treeProps: {
        label (data,) {
          return data.name
        }
      }
    }
  },
  computed: {
    hei () {
      return window.innerHeight - 150
    }
  },
  mounted () {
    this.getList()
  },
  methods: {
    addPid () {
      tool.openEdit({
        saveUrl: this.saveUrl,
        mod: this.mod,
        rule: this.rule,
        height: 500,
        whichPage: this.$route.name,
        saved: () => {
          this.getList()
        }
      })
    },
    append(data, node) {
      tool.openEdit({
        saveUrl: this.saveUrl,
        mod: this.mod,
        rule: this.rule,
        height: 500,
        whichPage: this.$route.name,
        initData: {
          pid: data.id,
          pidName: data.name
        },
        saved: (data) => {
          this.$refs.JTreeRef.append(data, node)
        }
      })
    },
    edit(data) {
      tool.openEdit({
        saveUrl: this.saveUrl,
        title: data.name,
        mod: this.mod,
        rule: this.rule,
        whichPage: this.$route.name,
        height: 500,
        initData: data,
        saved: (ret) => {
          if(!tool.xe.isEmpty(ret)) {
            for(let i in data) {
              data[i] = ret[i]
            }
          }
        }
      })
    },
    remove( data, node) {
      if(!node.isLeaf) return tool.err('请先删除子分类')
      tool.post(this.delUrl, {id: data.id, mod: this.mod, whichPage: this.$route.name}).then(ret => {
        if(ret.stat) {
          const parent = node.parent;
          const children = parent.data.children || parent.data;
          const index = children.findIndex(d => d.id === data.id);
          children.splice(index, 1);
        }
      })
    },
    getList () {
      tool.post(this.listUrl, {whichPage: this.$route.name, formData: {}}).then(ret => {
        if(ret.stat) {
          this.data = tool.toArrayTree(ret.data.list)
        }
      })
    },
    allowDrop (draggingNode, dropNode, type) {
      if(type !== 'inner') {
        return true
      }
    },
    allowDrag () {
      return true
    },
    nodeDrop (current, after) {
      let list = after.parent.childNodes
      let arr = []
      for (let i = 0; i < list.length; i++) {
        arr.push({
          id: list[i].data.id,
          sort: i
        })
      }
      tool.post('common/doSort', {formData: arr, mod: this.mod})
    }
  }
}
</script>

<style  lang="scss">
.j-tree {
  max-width: 600px;
}
.custom-tree-node {
  flex: 1;
  display: flex;
  //align-items: center;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
  .code {
    background: var(--el-border-color);
    width: 70px;
  }
  .label {
    width: 300px;
    text-align: left;
    padding-left: 10px;
  }
}
</style>
